<template>
  <div class="page">
    <s-header :name="'投诉举报详情'" :back="'/government/user/complaint'"></s-header>
    <van-form class="complaint">
      <div class="card-box">
        <div class="card-item">
          <div class="card-header">投诉信息</div>
          <van-divider />
          <van-field v-model="dataFrom.createTime" readonly input-align="right" label="投诉时间" />
          <van-field v-model="dataFrom.complaintObject" readonly input-align="right" label="投诉对象" />
          <van-field v-model="dataFrom.complaintLocation" readonly input-align="right" label="投诉对象位置" />
          <van-field v-model="dataFrom.complaintContent" readonly input-align="right" label="投诉内容" type="textarea" rows="2" autosize />
          <van-field label="相关照片" readonly input-align="right" />
          <div class="card-body">
            <div class="img-box">
              <van-image
                v-for="(item, index) in dataFrom.photos"
                :key="index"
                class="pictures"
                fit="cover"
                :src="item.url"
                @click="handleReview(item.url)"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="card-box">
        <div class="card-item">
          <div class="card-header">办理进度</div>
          <van-divider />
          <van-field v-model="dataFrom.statusName" readonly input-align="right" label="办理状态" />
          <van-field v-model="dataFrom.handelDept" readonly input-align="right" label="办理部门" />
          <van-field v-model="dataFrom.processingTime" readonly input-align="right" label="办理时间" />
          <van-field v-model="dataFrom.replyComments" readonly input-align="right" label="回复意见" />
        </div>
      </div>
      <div class="btn-group">
        <van-button type="button" class="cus-btn btn-default" @click="handleToRouter('/government/user/complaint')">返回</van-button>
        <van-button :loading="isCommit" type="button" class="cus-btn btn-primary" @click="handleSubmit">撤销投诉</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { ImagePreview, Toast } from 'vant'
import sHeader from '@/components/SimpleHeader'
import { getComplaintDetail, repealComplaint } from '@/service/user'
export default {
  components: {
    sHeader,
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      isCommit: false,
      chosenAddressId: '1',
      list: [],
      from: route.query.from,
      pictures: [],
      allFileList: [],
      isDetail: false,
      complaintId: null,
      dataFrom: {
        createTime: '',
        statusName: '',
      },
    })

    store.dispatch('getFileServerPrefix')

    onMounted(async () => {
      const { id } = route.params
      state.complaintId = id
      getComplaintDetail(id).then((res) => {
        state.dataFrom = Object.assign({}, res.data)
        if (state.dataFrom.photos && state.dataFrom.photos.length > 0) {
          state.dataFrom.photos.forEach((item) => {
            item.url = fileServerPrefix.value + item.url
          })
        }
      })
    })

    const handleReview = (url) => {
      ImagePreview({
        images: [url],
        showIndex: true,
        showIndicators: true,
        closeable: true,
      })
    }

    const handleToRouter = (r, query) => {
      router.push({ path: r, query: query || {} })
    }

    const handleSubmit = () => {
      state.isCommit = true
      repealComplaint({ id: state.complaintId })
        .then(() => {
          Toast.success('撤销成功')
          setTimeout(() => {
            router.push({ path: '/government/user/complaint' })
          }, 500)
          state.isCommit = false
        })
        .catch(() => {
          state.isCommit = false
        })
    }

    const fileServerPrefix = computed(() => {
      return store.state.fileServerPrefix
    })

    return {
      fileServerPrefix,
      ...toRefs(state),
      handleSubmit,
      handleToRouter,
      handleReview,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  .complaint {
    margin-top: 15px;
    .van-divider {
      margin: 10px 0 0;
    }
    /deep/ .van-field__label {
      font-size: 15px;
      font-weight: 400;
      color: #9297ae;
    }
    .card-body {
      .cell-box {
        // display: flex;
        &:after,
        &:before {
          display: table;
          content: '';
        }
        &:after {
          clear: both;
        }

        .value {
          font-size: 15px;
          font-weight: 400;
          color: #2e3f6a;
          position: relative;
          margin-left: 110px;
          line-height: 25px;
        }
      }
      .img-box {
        .pictures {
          width: 53px;
          height: 53px;
          margin-right: 10px;
        }
      }
    }
    .btn-group {
      padding: 20px 0;
      .cus-btn {
        width: 167px;
      }
    }
  }
}
</style>
